﻿@namespace MudBlazor.Docs.Examples

@*Keyframes by https://animate.style/*@
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" />
<style type="text/css">

    .bounceIn {
        opacity: 0;
        animation-delay: 0.5s;
        animation-duration: 0.5s;
        animation-name: bounceIn;
        animation-fill-mode: forwards;
    }

    .bounceOut {
        animation-duration: 0.5s;
        animation-name: bounceOut;
        animation-fill-mode: forwards;
    }

    .backInDown {
        opacity: 0;
        animation-delay: 0.5s;
        animation-duration: 0.5s;
        animation-name: backInDown;
        animation-fill-mode: forwards;
    }

    .backOutDown {
        animation-duration: 0.5s;
        animation-name: backOutDown;
        animation-fill-mode: forwards;
    }

    .rotateIn {
        opacity: 0;
        animation-delay: 0.5s;
        animation-duration: 0.5s;
        animation-name: rotateIn;
        animation-fill-mode: forwards;
    }

    .rotateOut {
        animation-duration: 0.5s;
        animation-name: rotateOut;
        animation-fill-mode: forwards;
    }

</style>

<MudCarousel Class="mud-width-full" Style="height:200px;" TData="object" AutoCycle="false">
    <MudCarouselItem Color="@Color.Primary" Transition="Transition.Custom" CustomTransitionEnter="@AnimationEntrance" CustomTransitionExit="@AnimationExit">
        <div class="d-flex" style="height:100%">
            <MudIcon Class="mx-auto my-auto" Icon="@Icons.Custom.Brands.MudBlazor" Size="@Size.Large" />
        </div>
    </MudCarouselItem>
    <MudCarouselItem Color="@Color.Secondary" Transition="Transition.Custom" CustomTransitionEnter="@AnimationEntrance" CustomTransitionExit="@AnimationExit">
        <div class="d-flex" style="height:100%">
            <MudIcon Class="mx-auto my-auto" Icon="@Icons.Custom.Brands.MudBlazor" Size="@Size.Large" />
        </div>
    </MudCarouselItem>
    <MudCarouselItem Transition="Transition.Custom" CustomTransitionEnter="@AnimationEntrance" CustomTransitionExit="@AnimationExit">
        <div class="d-flex" style="height:100%">
            <MudIcon Class="mx-auto my-auto" Icon="@Icons.Custom.Brands.MudBlazor" Color="@Color.Primary" Size="@Size.Large" />
        </div>
    </MudCarouselItem>
</MudCarousel>

<MudTextField @bind-Value="AnimationEntrance" Label="Entrance Class (copy and paste from style tag)" Class="ma-2" />
<MudTextField @bind-Value="AnimationExit" Label="Exit Class (copy and paste from style tag)" Class="ma-2"/>

@code{ 
    private string AnimationEntrance = "bounceIn";
    private string AnimationExit = "bounceOut"; 
}

